PBA INSTITUTE

CSS Text Decoration

Text decoration in CSS enhances text appearance with properties like text-decoration-line for underline, overline, or strike-through styles, text-decoration-color for color specification, text-decoration-style for line appearance (solid, dashed, etc.), and text-decoration-thickness for line thickness control. These properties allow web designers to customize text presentation beyond basic formatting, ensuring visual clarity and aesthetic appeal in web content.

Some examples of text decoration

Example 1

														
														
<html>
<head>
<style>
h1 
{
  text-decoration: overline;
}

h2 
{
  text-decoration: line-through;
}

h3
{
  text-decoration: underline;
}

h4 
{
  text-decoration: underline overline;
}
</style>
</head>
<body>

<h1>PBA INSTITUTE</h1>
<h2>PBA INSTITUTE</h2>
<h3>PBA INSTITUTE</h3>
<h4>PBA INSTITUTE</h4>

</body>
</html>

														
														
													

OUTPUT:

In this example, HTML document uses CSS to style headings (<h1> to <h4>) with different text decorations: <h1> with an overline, <h2> with a line-through, <h3> with an underline, and <h4> with both underline and overline. The background color of the page is set to light blue (#B9DAF1). All headings are centered horizontally within the page (align="center").

Example 2

														
														

<html>
<head>
<style>
body{
	background-color: #CCD1D1 ;
}
div.a 
{
  text-decoration-line: underline;
  text-decoration-style: solid;
}

div.b 
{
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

div.c 
{
  text-decoration-line: underline;
  text-decoration-style: double;
}

div.d 
{
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}
</style>
</head>
<body>

<div class="a" align="center">PBA</div>
<br>
<div class="b" align="center">PBA INST</div>
<br>
<div class="c" align="center">PBA INSTITUTE</div>
<br>
<div class="d" align="center">COMPUTER PROGRAMMING INSTITUTE</div>



</body>
</html>





														
														
													

OUTPUT:

In this example, HTML code defines a webpage with styled text using CSS. Each <div> element has different text decorations (underline, overline, or both) styled with various decoration styles (solid, wavy, double). The background color of the webpage is set to a light gray (#CCD1D1). Each <div> is centered (align="center") within the body and contains text representing different institutes or programs.

Conclusion :

In conclusion, text decoration in CSS enhances the visual presentation of text by adding stylistic elements such as underlines, overlines, and line-throughs. It offers advantages like improved readability, emphasis on specific content, and aesthetic appeal. By customizing decoration styles (solid, wavy, double), designers can create unique text effects that align with branding or design themes. This flexibility allows for clearer communication of information and better user engagement on web pages.

CSS Text Decoration

Some examples of text decoration

Conclusion :

CSS All Topics

SHARE